<template>
    <div>
        <div class="sign-message-container">
            <div class="contract-container">
                <div class="header">
                    <span>当前签约信息</span><el-button type="primary" link>编辑</el-button>
                </div>
                <div class="contract-info">
                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">签约编号</span>
                            <span class="value">{{ nowSignData[0]?._id }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">签约状态</span>
                            <span class="value">
                                <el-text type="success">待审核</el-text>
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="label">签约机构</span>
                            <span class="value">{{nowSignData[0]?.organizationId?.name}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">签约团队</span>
                            <span class="value">{{nowSignData[0]?.teamId?.name}}</span>
                        </div>
                    </div>

                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">签约医生</span>
                            <span class="value">{{nowSignData[0]?.doctorId?.name}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">服务包</span>
                            <span class="value">{{ nowSignData[0]?.servicePackId?.name }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">签约周期</span>
                            <span class="value">{{nowSignData[0]?.servicePackId?.period}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">费用</span>
                            <span class="value">{{nowSignData[0]?.servicePackId?.price}}</span>
                        </div>
                    </div>

                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">签约类型</span>
                            <span class="value">{{nowSignData[0]?.type}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">申请时间</span>
                            <span class="value">{{nowSignData[0]?.applyTime}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">生效日期</span>
                            <span class="value">2020/10/09</span>
                        </div>
                        <div class="info-item">
                            <span class="label">签约备注</span>
                            <span class="value">{{nowSignData[0]?.remark}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sign-record-container">
            <p>签约记录</p>

            <el-table :data="SignsData.rows" stripe style="width: 100%;"
                :header-cell-style="{ background: '#f2f2f2', fontWeight: 'normal', color: '#515a6e', height: '46px', textAlign: 'center' }"
                :cell-style="{ height: '46px', textAlign: 'center' }">
                <el-table-column prop="_id" label="编号" width="180" />
                <el-table-column prop="organizationId.name" label="签约机构" />
                <el-table-column prop="teamId.name" label="签约医生团队" />
                <el-table-column prop="doctorId.name" label="签约医生" />
                <el-table-column prop="servicePackId.name" label="服务包" />
                <el-table-column prop="applyTime" label="申请时间" />
                <el-table-column prop="effectiveDate" label="到期时间" />
                <el-table-column label="操作" >
                    <el-button link type="primary">查看详情</el-button>
                </el-table-column>
            </el-table>
        </div>

        <el-button @click="$router.back()">返回</el-button>
    </div>

</template>

<script setup>

import { computed, onMounted, watch } from 'vue';
import { useFindData } from '../../../../composables/findData';

const { SignsData,findSignsAsync } = useFindData()
const props = defineProps(['residentDetailData'])

onMounted(()=>{
    // findSignsAsync({name:props.residentDetailData.name})
    findSignsData()
})

watch(SignsData,()=>{
    console.log(SignsData.rows,'rows');
},{deep:true})

watch(()=>props.residentDetailData.name,()=>{
    findSignsData();
},{deep:true})

const nowSignData = computed(()=>{
    return SignsData.rows.filter((item)=>{
        return item.state==0})
})


async function findSignsData(){
    if(props.residentDetailData.name){
        findSignsAsync({name:props.residentDetailData.name})
        console.log(SignsData.rows,'1122');
    }
}

   
</script>

<style lang="scss" scoped>
.sign-record-container{
    margin-bottom: 20px;
}
.contract-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
    background-color: #F2F7FB;
    margin-top: 30px;
    margin-bottom: 30px;
}

.header {
    margin-bottom: 20px;

    span {
        font-weight: 500;
        margin-right: 5px;
    }
}

.header h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.edit-btn {
    font-size: 14px;
    color: #1890ff;
    cursor: pointer;
    margin-left: 10px;
}

.contract-info {
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 13px;
}

.info-row {
    display: flex;
    margin-bottom: 30px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-item {
    flex: 1;
    display: flex;
}

.label {
    color: #666;
    width: 80px;
    margin-right: 10px;
}

.value {
    flex: 1;
    color: #333;
}





.action-cell {
    color: #1890ff;
    cursor: pointer;
}
</style>